<template>
	<view class="address-page">
		<!-- 有地址时显示列表 -->
		<view v-if="addressList.length > 0" class="address-list">
			<view class="address-item" v-for="(item, index) in addressList" :key="item.id">

				<!-- 收花人信息 -->
				<view class="address-header">
					<text class="receiver">{{ item.receiver }}</text>
					<text class="phone">{{ item.phone }}</text>
				</view>

				<!-- 地址信息 -->
				<view class="address-detail">
					<text>{{ item.region.join(' ') }} {{ item.detail }}</text>
				</view>

				<!-- 操作区：左侧设为默认，右侧修改删除 -->
				<view class="address-actions">
					<!-- 左侧：设为默认 -->
					<view class="default-area">
						<!-- 自定义样式的复选框 -->
						<view 
							class="custom-checkbox" 
							:class="{ 'checked': item.isDefault }"
							@click="setAsDefault(item.id)"
						>
							<uni-icons 
								type="checkmark" 
								size="24" 
								color="#fff" 
								v-if="item.isDefault"
							>✓</uni-icons>
						</view>
						<text class="default-text">{{ item.isDefault ? '已设默认' : '设为默认' }}</text>
					</view>

					<!-- 右侧：修改/删除 -->
					<view class="operation-area">
						<text class="edit-btn" @click="editAddress(item.id)">修改</text>
						<text class="delete-btn" @click="deleteAddress(index)">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 无地址时显示提示 -->
		<view class="empty-tip" v-else>
			<image src="/static/empty-box.png" class="empty-img" />
			<text class="empty-text">您还没有收货地址</text>
		</view>

		<!-- 底部添加地址按钮 -->
		<view class="add-btn" @click="gotoEdit">
			<text>添加新地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: []
			};
		},
		onShow() {
			this.addressList = uni.getStorageSync('addressList') || [];
		},
		methods: {
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 跳转到编辑地址页面
			gotoEdit(id) {
				const url = id ? `/pages/address/edit?id=${id}` : "/pages/address/edit";
				uni.navigateTo({ url });
			},
			// 编辑地址
			editAddress(id) {
				this.gotoEdit(id);
			},
			// 删除地址
			deleteAddress(index) {
				uni.showModal({
					title: "提示",
					content: "确定要删除该地址吗？",
					success: (res) => {
						if (res.confirm) {
							this.addressList.splice(index, 1);
							uni.setStorageSync('addressList', this.addressList);
						}
					}
				});
			},
			// 设置默认地址（核心逻辑）
			setAsDefault(id) {
				// 遍历地址列表，只保留当前选中项为默认
				this.addressList.forEach(item => {
					item.isDefault = item.id === id;
				});
				// 同步更新到本地存储
				uni.setStorageSync('addressList', this.addressList);
			}
		}
	}
</script>

<style scoped>
	.address-page {
		height: 95vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	/* 地址列表样式 */
	.address-list {
		flex: 1;
		padding: 20rpx;
	}

	.address-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	}

	.address-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.receiver {
		font-size: 30rpx;
		font-weight: 500;
	}

	.phone {
		font-size: 28rpx;
		color: #666;
	}

	.address-detail {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	.address-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 15rpx;
		border-top: 1rpx solid #f1f1f1;
	}

	/* 左侧默认地址区域 */
	.default-area {
		display: flex;
		align-items: center;
	}

	/* 复选框 */
	.custom-checkbox {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%; 
		border: 2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}

	.custom-checkbox.checked {
		background-color: #e63946; 
		border-color: #e63946;
	}

	.default-text {
		font-size: 26rpx;
		margin-left: 12rpx;
	}

	.default-area:has(.checked) .default-text {
		color: #e63946;
		font-weight: 500;
	}

	/* 右侧操作按钮 */
	.operation-area {
		display: flex;
		gap: 30rpx;
	}

	.edit-btn, .delete-btn {
		font-size: 26rpx;
		color: #666;
		padding: 5rpx 10rpx;
	}

	.edit-btn {
		border-right: 1rpx solid #eee;
		padding-right: 30rpx;
	}

	.empty-tip {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.add-btn {
		background-color: #e63946;
		color: #fff;
		text-align: center;
		padding: 30rpx;
		font-size: 32rpx;
		margin: 20rpx;
		border-radius: 16rpx;
	}
</style>